<template>
  <div class="app-container">
    <div class="app-container_conter1">
      <!--    <el-row>-->
      <!--      <el-col :span="23">-->
      <!--        <h2 style="text-align: center">报案详情</h2>-->
      <!--      </el-col>-->
      <!--      <el-col :span="1">-->
      <!--        <el-button type="primary" style="margin-top: 20px;" @click="getBack">返回</el-button>-->
      <!--      </el-col>-->
      <!--    </el-row>-->
      <div class="app-container_conter_title">
        报案信息
      </div>
      <div class="app-container_conter_item">
        <div class="app-container_conter_item1">
          <div class="name">报案号: {{ infoList.id }}</div>
          <div class="name">报案时间: {{ infoList.accident_time }}</div>
          <div class="name">保单号: {{ infoList.insure_no }}</div>
        </div>
        <div class="app-container_conter_item1">
<!--          <div class="name">产品名称:</div>-->
          <div class="name">被保险人: {{ user_name }}</div>
          <div class="name">实际用工单位: {{ infoList.actual_unit }}</div>
          <div class="name">出险人姓名: {{ infoList.name }}</div>
        </div>
        <div class="app-container_conter_item1">
<!--          <div class="name">渠道:</div>-->
<!--          <div class="name">保险公司:</div>-->

        </div>
        <div class="app-container_conter_item1">
<!--          <div class="name">报案人电话:</div>-->
          <div class="name">报案人: {{ infoList.name }}</div>
          <div class="name">出险人姓名: {{ infoList.name }}</div>
          <div class="name">出险人证件号码: {{ infoList.id_card_no }}</div>
        </div>
        <div class="app-container_conter_item1">
          <div class="name">工种: {{ infoList.industry_name }}</div>
          <div class="name">出险人联系电话:</div>
          <div class="name">出险时间: {{ infoList.accident_time }}</div>
        </div>
        <div class="app-container_conter_item1">
          <div class="name">受伤部位:{{infoList.injured_part}}</div>
          <div class="name">是否骨折:{{infoList.is_fracture?'是':'否'}}</div>
          <div class="name">治疗方式:{{infoList.treatment}}</div>
        </div>
        <div class="app-container_conter_item1">
          <div class="name">预估费用:{{infoList.estimate_money}}</div>
          <div class="name">医院:{{infoList.hospital}}</div>
        </div>
        <div class="app-container_conter_item1">
          <div>事故地点:{{infoList.accident_area}}</div>
        </div>
        <div class="app-container_conter_item1">
          <div>事件经过: {{ infoList.description }}</div>
        </div>
        <div class="app-container_conter_item1">
          <div style="width: 100px">报案图片:</div>
          <div style="display: flex;flex-flow: wrap" v-if="infoList.user_picture!=null">
            <div class="app-container_conter_item1_data">
              <div class="title">身份证:</div>
              <div v-if="infoList.user_picture!=null">
                <el-image
                    class="el-image"
                    v-if="infoList.user_picture.identity_card!=''"
                    v-for="item in infoList.user_picture.identity_card"
                    :src="url+item"
                    :preview-src-list="[url+item]">
                </el-image>
              </div>
            </div>
            <div class="app-container_conter_item1_data">
              <div class="title">医疗发票:</div>
              <div v-if="infoList.user_picture!=null">
                <el-image
                    class="el-image"
                    v-if="infoList.user_picture.hospital_invoice!=''"
                    v-for="item in infoList.user_picture.hospital_invoice"
                    :src="url+item"
                    :preview-src-list="[url+item]">
                </el-image>
              </div>
            </div>

            <div class="app-container_conter_item1_data">
              <div class="title">病历本:</div>
              <div v-if="infoList.user_picture!=null">
                <el-image
                    class="el-image"
                    v-if="infoList.user_picture.medical_record_book!=''"
                    v-for="item in infoList.user_picture.medical_record_book"
                    :src="url+item"
                    :preview-src-list="[url+item]">
                </el-image>
              </div>
            </div>
            <div class="app-container_conter_item1_data">
              <div class="title">用药清单:</div>
              <div v-if="infoList.user_picture!=null">
                <el-image
                    class="el-image"
                    v-if="infoList.user_picture.medications!=''"
                    v-for="item in infoList.user_picture.medications"
                    :src="url+item"
                    :preview-src-list="[url+item]">
                </el-image>
              </div>
            </div>
            <div class="app-container_conter_item1_data">
              <div class="title">住院小结:</div>
              <div v-if="infoList.user_picture!=null">
                <el-image
                    class="el-image"
                    v-if="infoList.user_picture.hospitalized!=''"
                    v-for="item in infoList.user_picture.hospitalized"
                    :src="url+item"
                    :preview-src-list="[url+item]">
                </el-image>
              </div>
            </div>
            <div class="app-container_conter_item1_data">
              <div class="title">其他图片:</div>
              <div v-if="infoList.user_picture!=null">
                <el-image
                    class="el-image"
                    v-if="infoList.user_picture.other!=''"
                    v-for="item in infoList.user_picture.other"
                    :src="url+item"
                    :preview-src-list="[url+item]">
                </el-image>
              </div>
            </div>
            <div class="app-container_conter_item1_data">
              <div class="title">事故现场照片:</div>
              <div v-if="infoList.user_picture!=null">
                <el-image
                    class="el-image"
                    v-if="medical_invoice.length!=0"
                    v-for="item in medical_invoice"
                    :src="url+item"
                    :preview-src-list="[url+item]">
                </el-image>
              </div>
            </div>
            <div class="app-container_conter_item1_data">
              <div class="title">手持身份证:</div>
              <div v-if="infoList.user_picture!=null">
                <el-image
                    class="el-image"
                    v-if="id_card.length!=0"
                    v-for="item in id_card"
                    :src="url+item"
                    :preview-src-list="[url+item]">
                </el-image>
              </div>
            </div>
            <div class="app-container_conter_item1_data">
              <div class="title">受伤部位照片:</div>
              <div v-if="infoList.user_picture!=null">
                <el-image
                    class="el-image"
                    v-if="medical_history!=0"
                    v-for="item in medical_history"
                    :src="url+item"
                    :preview-src-list="[url+item]">
                </el-image>
              </div>
            </div>
          </div>
          <div v-else style="color: #C71E1E">未上传</div>
        </div>


      </div>

<!--      <div style="text-align: center;margin-top: 20px">-->
<!--        <el-button type="primary"-->
<!--                   style="width: 200px;margin-right: 20px"-->
<!--                   v-hasPermi="['insurance:repordRecord:review']"-->
<!--                   v-if="infoList.status=='待审核'" @click="handlereport">通过-->
<!--        </el-button>-->
<!--        <el-button type="primary"-->
<!--                   style="width: 200px"-->
<!--                   v-hasPermi="['insurance:repordRecord:review']"-->
<!--                   v-if="infoList.status=='待审核'" @click="handlerejection">拒绝-->
<!--        </el-button>-->
<!--      </div>-->
<!--      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
<!--        <el-form ref="form" :model="form" :rules="rules" label-width="100px">-->
<!--          <el-form-item label="拒绝原因" prop="reason">-->
<!--            <el-input type="textarea" v-model="form.reason" placeholder="请输入拒绝原因"/>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--          <el-button type="primary" @click="submitForm('form')">确 定</el-button>-->
<!--          <el-button @click="cancel">取 消</el-button>-->
<!--        </div>-->
<!--      </el-dialog>-->
    </div>
  </div>
</template>
<script>
import {getRepordRecord, getRepordRecord1, review} from '@/api/insurance/repordRecord'

export default {
  name: "details1",
  data() {
    return {
      url: process.env.VUE_APP_BASE_API,//地址
      id: '',
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      insure_no: '',//保单号
      user_name: '',//被保险人名称
      infoList: {
        medical_invoice:'',//事故现场照片
        id_card:'',//手持身份证照片
        medical_history:'',//受伤部位照片
        name:'',//  保单用户姓名
        create_time:'',//报案时间
        insureId:'',//保单id
        insUserId:'',//保单用户id
        insure_no:'',//保单号
        idCardNo:'',//保单用户证件号码
        laborUnit:'',//劳动合同单位
        actualUnit:'',//实际用工单位
        industryName:'',//工种名称
        area:'',//所属地区
        accidentTime:'',//事故时间
        accident_type:'',//事故类型
        accident_area:'',//事故地点
        injured_part:'',//受伤部位
        is_fracture:'',// 是否骨折 0否 1是
        treatment:'',//治疗方式
        number:'',//住院几楼几号床
        estimateMoney:'',//预估金额
        hospital:'',//医院
        description:'', //事故描述经过

        user_picture: {
          id: null,
          userId: null,
          medical_invoice: [],
          medical_history: [],
          id_card: [],
          hospitalized: [],
          medications: [],
          other: [],
          create_time: null,
          update_time: null,
        }

      },
      id_card:[],//手持身份证照片
      medical_history:[],//受伤部位照片
      medical_invoice:[],//事故现场照片
      // 表单参数
      form: {
        reason: '',//拒绝原因
        reportId: '',//报案id
        status: '3',//状态
      },
      // 表单校验
      rules: {
        reason: [
          {required: true, message: '拒绝原因不能为空', trigger: 'blur'},
        ]
      },
      businesslicense: [],//营业执照
      // 状态字典
      statusOptions: [],
      accidentType: [],//事故类型
    }
  },
  created() {
    this.getDicts("accident_type").then(response => {
      // console.log('事故类型',response);
      this.accidentType = response.data;
    });
    this.getDicts("report_status").then(response => {
      // console.log('response12',response)
      this.statusOptions = response.data;
    });
    this.id = this.$route.query.id;
    this.insure_no = this.$route.query.insure_no;
    this.user_name = this.$route.query.user_name;


    // console.log('id', this.id)
    // //获取报案详情数据
    var obj = {
      id: this.id
    }
    getRepordRecord1(obj).then(res => {
      this.businesslicense = []
      console.log('详情', res);
      this.infoList = res.data;
      if (this.infoList.businesslicense != null) {
        this.businesslicense.push(this.infoList.businesslicense);
      }
      for (var i = 0; i < this.statusOptions.length; i++) {
        if (this.statusOptions[i].dictValue == this.infoList.status) {
          this.infoList.status = this.statusOptions[i].dictLabel
        }
      }
      for (var i = 0; i < this.accidentType.length; i++) {
        if (this.accidentType[i].dictValue == this.infoList.accident_type) {
          this.infoList.accident_type = this.accidentType[i].dictLabel
        }
      }

      // console.log('businesslicense',this.infoList);
      // console.log('businesslicense',this.businesslicense);
      if (this.infoList.user_picture != null) {
        if( this.infoList.user_picture.identity_card!=''){
          this.infoList.user_picture.identity_card = JSON.parse(this.infoList.user_picture.identity_card)
        }
        if( this.infoList.user_picture.hospitalized!=''){
          this.infoList.user_picture.hospitalized = JSON.parse(this.infoList.user_picture.hospitalized)
        }
        if( this.infoList.user_picture.medical_record_book!=''){
          this.infoList.user_picture.medical_record_book = JSON.parse(this.infoList.user_picture.medical_record_book)
        }
        if( this.infoList.user_picture.hospital_invoice!=''){
          this.infoList.user_picture.hospital_invoice = JSON.parse(this.infoList.user_picture.hospital_invoice)
        }

        if( this.infoList.user_picture.other!=''){
          this.infoList.user_picture.other = JSON.parse(this.infoList.user_picture.other)
        }

        if( this.infoList.user_picture.medications!=''){
          this.infoList.user_picture.medications = JSON.parse(this.infoList.user_picture.medications)
        }

        console.log('infoList',this.infoList)
         if(this.infoList.user_picture.id_card!=null){
           this.id_card=[];
           this.id_card.push(this.infoList.user_picture.id_card)
         }
        if(this.infoList.user_picture.medical_history!=null){
          this.medical_history=[];
          this.medical_history.push(this.infoList.user_picture.medical_history)
        }
        if(this.infoList.user_picture.medical_invoice!=null){
          this.medical_invoice=[];
          this.medical_invoice.push(this.infoList.user_picture.medical_invoice)
        }

      }


    })
  },
  methods: {
    //返回上一页
    getBack() {
      this.$router.back(-1);
    },
    //审核通过
    handlereport() {
      this.form.reportId = this.infoList.id
      var that = this
      this.form.status = '3';
      // console.log('form',this.form)
      this.$confirm('是否确认审核通过', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        review(that.form).then(res => {
          // console.log('审核',res)
          that.$message({
            message: res.msg,
            type: 'success'
          })
          setTimeout(() => {
            that.$router.back(-1)
          }, 500)
        })
      }).then(response => {

      })
    },
    //拒绝审核
    handlerejection() {
      this.form.reportId = this.infoList.id
      this.open = true;
    },
    // 取消按钮
    cancel() {
      this.open = false;

    },
    //提交审核
    submitForm(form) {
      // console.log('form',this.form)
      var that = this
      this.form.status = '2'
      this.$refs[form].validate((valid) => {
        if (valid) {
          review(that.form).then(res => {
            that.$message({
              message: res.msg,
              type: 'success'
            })
            this.open = false

            setTimeout(() => {
              that.$router.back(-1)
            }, 500)
            // console.log('审核',res)
          })
        }
      });
    },
  }


}
</script>
<style scoped lang="scss">
.app-container_conter1 {
  background: #F8FBFF;
  //padding:30px;
  border-radius: 10px;
  box-sizing: border-box;

  .app-container_conter_title {

    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #1F1F1F;
    border-bottom: 1px solid #D1D1D1;
    padding: 20px;
  }

  .app-container_conter_item {
    padding: 20px;

    .app-container_conter_item1 {
      //background: pink;
      display: flex;
      margin-bottom: 10px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #555555;

      .name {
        width: 33%;
        //background: plum;

      }

      .app-container_conter_item1_data {
        display: flex;
        flex-direction: column;
        font-size: 16px;
        margin-left: 20px;

        .el-image {
          width: 143px;
          height: 180px;
          margin-top: 10px;
        }
      }
    }
  }

  .table {
    border-collapse: collapse;
    margin: 0 auto;
    border: 1px solid #bbbbbb;
    font-size: 15px;
    color: #333333;
  }
}
</style>


